<template>
  <el-form :model="form">
    <el-form-item label="上传文件" :label-width="formLabelWidth">
      <el-upload
        ref="uploadResult"
        :action='url'
        :limit="limitNum"
        :auto-upload="false"
        multiple
        accept='.pdf,.jpg,.jpeg,.png'
        :before-upload="beforeUploadFile"
        :on-change="fileChange"
        :on-exceed="exceedFile"
        :on-success="handleSuccess"
        :on-error="handleError"
        :file-list="fileList"
      >
        <el-button size="small" plain>选择文件</el-button>
        <div slot="tip" class="el-upload__tip">支持上传pdf/jpg/png</div>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button size="small" type="primary" @click="uploadFile"
        >立即上传</el-button
      >
      <el-button size="small">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from "axios"
import Qs from 'qs'
import { start } from 'nprogress'
export default {
  data() {
    return {
      limitNum: 100,
      formLabelWidth: "80px",
      form: {
        file: ''
      },
      fileList: [],
      url: process.env.VUE_APP_BASE_API + '/system/uploadCheckResult'
    }
  },
  methods: {
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$notify.warning({
        title: "警告",
        message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`,
      });
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      console.log("change");
      console.log(file);
      this.form.file = file.raw;
      console.log(this.form.file);
      console.log(fileList);
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      console.log('before upload');
      console.log(file);
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024
      let access = ['pdf', 'jpg', 'png']
      if (access.indexOf(extension, start) === -1) {
        this.$notify.warning({
          title: '警告',
          message: '只能上传pdf/jpg/png文件'
        })
      }
      if (size > 10) {
        this.$notify.warning({
          title: "警告",
          message: "文件大小不得超过10M",
        })
      }
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      this.$notify.success({
        title: '成功',
        message: '文件上传成功'
      })
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      this.$notify.error({
        title: '错误',
        message: '文件上传失败'
      })
    },
    uploadFile() {
      alert(this.file)
      this.$refs.uploadResult.submit()
      // let formData = new FormData()
      // console.log(this.form.file)
      // formData.append('file', this.form.file)
      // let data = {
      //   'file':this.form.file
      // }
      // data = Qs.stringify(data)
      // alert(data)
      // axios({
      //   headers:{
      //     'deviceCode': 'A95ZEF1-47B5-AC90BF3'
      //   },
      //   method: 'post',
      //   url: this.url,
      //   data: data
      // })
      // axios.post(this.url, formData, { "Content-Type": "multipart/form-data" }
      // ).then(res => {
      //   console.log(res)
      // })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
